﻿<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="author" content="黄浩">
<title>Canvas旋转太极图</title>
</head>

<body>
 <canvas id="TaiChi" width="400" height="400" style="border:1px solid #c3c3c3; background-color:#0C9">你的浏览器不支持canvas标签</canvas>
 <script>
 var myCanvastaiji =document.getElementById("TaiChi");
 var myContext= myCanvastaiji.getContext("2d");
 
 var deg = 0;//定义要增加的角度
 var r = 100; //此为太极中心点到小黑点（白点）的像素距离
 var rl = 200;//此为太极中心到边界的像素距离 

 function drawTaiChi()
 {
 var px =Math.sin(deg)*r; 
 var py =Math.cos(deg)*r 
//大黑半圆
 myContext.fillStyle="black";
 myContext.beginPath();
 myContext.arc(rl,rl,200,0.5*Math.PI +deg,1.5*Math.PI +deg,true);
 myContext.closePath();
 //大白半圆
 myContext.fill();
 myContext.fillStyle="white";
 myContext.beginPath();
 myContext.arc(rl,rl,200,1.5*Math.PI +deg,0.5*Math.PI +deg,true);
 myContext.closePath();
 myContext.fill();
 //小白半圆
 myContext.fillStyle="white";
 myContext.beginPath();
 myContext.arc(rl+px,rl-py,100,0,2*Math.PI,true);
 myContext.closePath();
 myContext.fill();
 //小黑半圆
 myContext.fillStyle="black";
 myContext.beginPath();
 myContext.arc(rl-px,rl+py,100,0,2*Math.PI,true);
 myContext.closePath();
 myContext.fill();
 //小黑点
 myContext.fillStyle="black";
 myContext.beginPath();
 myContext.arc(rl+px,rl-py,20,0,2*Math.PI,true);
 myContext.closePath();
 myContext.fill();
  //小白点
 myContext.fillStyle="white";
 myContext.beginPath();
 myContext.arc(rl-px,rl+py,20,0,2*Math.PI,true);
 myContext.closePath();
 myContext.fill();
 } 
 function play()
 {
    deg +=0.1;
 }
 function stop()
 {
    deg=0;
 }
setInterval(drawTaiChi,100);
 </script>
 <hr color="#00BF55" size="5"/>

<div>
	<button id="play" title="play" onClick="setInterval(play,100)">旋转</button>
    <button id="stop" title="stop" onClick="setInterval(stop,100);">停止</button>
</div>
</body>
</html>
